<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <div class="doumee_table_header">
      <el-button
        v-if="meta.indexOf('addShare') > -1"
        v-preventReClick
        type="primary"
        @click="handleIncreased"
      >新建</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="任务名称" prop="name" min-width="160" show-overflow-tooltip>
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="handleDetail(scope.row)">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关联消费类型" prop="typeInfo" show-overflow-tooltip min-width="160" />
      <el-table-column align="center" label="佣金比例(%)" prop="ratio" min-width="100" />
      <el-table-column align="center" label="单笔起底金额" prop="beginMoney" min-width="110" />
      <el-table-column align="center" label="任务模式" min-width="100">
        <template v-slot="scope">
          <span v-if="scope.row.shareUsers == '0'">指定人员</span>
          <span v-if="scope.row.shareUsers == '1'">全部开放</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="有效期" prop="beginTime" min-width="180">
        <template v-slot="scope">
          <div>
            <div v-if="scope.row.beginTime">起:{{ scope.row.beginTime }}</div>
            <div v-if="scope.row.endTime">止:{{ scope.row.endTime }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="返佣笔数" prop="orderNum" min-width="80" />
      <el-table-column align="center" label="排序码" prop="sortNum" min-width="80" />
      <el-table-column align="center" label="创建时间" prop="createTime" min-width="160" />
      <el-table-column align="center" label="任务状态" fixed="right" width="80">
        <template v-slot="scope">
          <span v-if="scope.row.status == '0'">待发布</span>
          <span v-if="scope.row.status == '1'">启用</span>
          <span v-if="scope.row.status == '2'">禁用</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" fixed="right">
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button v-if="scope.row.status == '0' && meta.indexOf('changeShareStatus') > -1" v-preventReClick type="text" @click="changeStatus(scope.row,1)">发布</el-button>
            <el-button v-if="scope.row.status == '1' && meta.indexOf('changeShareStatus') > -1" v-preventReClick type="text" @click="changeStatus(scope.row,2)">禁用</el-button>
            <el-button v-if="scope.row.status == '2' && meta.indexOf('changeShareStatus') > -1" v-preventReClick type="text" @click="changeStatus(scope.row,1)">启用</el-button>
            <el-button v-preventReClick type="text" @click="handlePeople(scope.row)">人员</el-button>
            <!-- <el-button v-if="scope.row.status != '0'" @click="handleCopy(scope.row)" v-preventReClick type="text">复制</el-button> -->
            <el-button v-if="scope.row.status == '0' && meta.indexOf('addShare') > -1" v-preventReClick type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == '0' && meta.indexOf('deletedShareTask') > -1" v-preventReClick class="danger" type="text" @click="handleDel(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
  </div>
</template>

<script>
import Paginations from '@/components/paginations'
import { queryFormConfig } from './config'

import { ShareList, changeShareStatus, delShare } from '@/api'
export default {
  components: {
    Paginations
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filters: {},
      queryFormConfig,
      pagination: {
        page: 1,
        rows: 10
      },
      list: [],
      totalCount: 0,
      listLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const { filters, pagination } = this
      this.listLoading = true
      ShareList({ param: filters, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    changeStatus(item, status) {
      const param = {
        shareId: item.id,
        status
      }
      const message = status === 1 ? '发布/启用成功' : '禁用成功'
      changeShareStatus({ param }).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success(message)
        this.getList()
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getList()
    },
    handleDel(item) {
      this.$confirm('此操作将删除该分享任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delShare({ param: {
            shareId: item.id
          }}).then(res => {
            if (res.errorCode !== '000000') return
            this.$message.success('删除成功')
            this.getList()
          })
        })
    },
    handleEdit(item) {
      const { id } = item
      this.$router.push({ name: 'TaskAdd', query: { id }})
    },
    handleDetail(item) {
      this.$router.push({ name: 'TaskDetail', query: { id: item.id }})
    },
    handlePeople(item) {
      this.$router.push({ name: 'SharePeople', query: {
        id: item.id,
        shareUsers: item.shareUsers
      }})
    },
    handleIncreased() {
      this.$router.push({ name: 'TaskAdd' })
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    }
  }
}
</script>

<style>

</style>
